<template>
  <div>
    <el-container class="container">
      <el-header class="c_header text_center"> header </el-header>
      <el-container class="content">
        <el-aside class="c_aside text_center">
          <router-link v-for="item in navLists" :key="item.id" tag="li" :to="item.path">
            <p @click="handelNav" class="c_aside_item">{{ item.name }}</p>
            <!-- <p class="c_aside_item">{{ item.name }}</p> -->
          </router-link>
        </el-aside>
        <el-main class="c_main">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="item in breadcrumbs" :key="item.id">{{
              item.name
            }}</el-breadcrumb-item>
          </el-breadcrumb>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      navLists: [
        {
          name: "home",
          path: "/home",
        },
        {
          name: "about",
          path: "/about",
        },
      ],

      breadcrumbs: [],
    };
  },

  created() {},

  computed: {},
  methods: {
    handelNav() {
      this.$store.commit("increment");
      console.log(this.$store.state.count);
    },
  },

  updated() {
    // const { path, name } = this.$route;
    // console.log(name,path);
    // this.breadcrumbs.push({
    //   name: name,
    //   path:path,
    // });
  },
};
</script>

<style scoped>
.container {
  min-height: 93vh;
}

.c_header {
  height: 7vh !important;
  position: fixed;
  top: 0;
  z-index: 2;
  left: 0;
  background-color: #fff;
  width: 100vw;
  box-shadow: #999 1px 0 10px 1px;
}

.content {
  position: relative;
  top: 7vh;
}

.c_aside {
  position: fixed;
  width: 15vw !important;
  background-color: aqua;
  height: 93vh;
  overflow: hidden;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.c_main {
  width: 82vw;
  position: absolute;
  background-color: pink;
  left: 16vw;
  min-height: 93vh;
  box-shadow: #999 1px 0 10px 1px;
  
}

.c_aside_item {
  height: 40px;
  line-height: 40px;
}

.c_aside_item:hover {
  background-color: red;
  color: #333;
}
.router-link-active {
  color: #000;
  background-color: pink;
}
</style>
